Editor.Draggers.Canvas = function () {
	var background;
	var background0;
	var backgroundTemp;
	var iniX;
	var iniY;
	var isActive = false;
	var rect;
	var x;
	var y;
	var width;
	var height;
	var arrGrid = new Array();

	return {
		init: function () {},
		mouseover: function () {},
		mouseout: function () {},
		remove: function () {},
		draw: function () {
			background0 = Editor.STATE.CANVAS.rect(0, 0, Editor.CONFIG.CANVAS_WIDTH, Editor.CONFIG.CANVAS_HEIGHT, 0).attr(Editor.CONFIG.BACKGROUND_ATTR);
			background = Editor.STATE.CANVAS.rect(0, 0, Editor.CONFIG.CANVAS_WIDTH, Editor.CONFIG.CANVAS_HEIGHT, 0).attr(Editor.CONFIG.BACKGROUND_ATTR).attr(Editor.CONFIG.INVISIBLE_ATTR);
			if (Editor.CONFIG.GRID_DRAW) {
				var posx = 0;
				while (posx <= Editor.CONFIG.CANVAS_WIDTH) {
					var path = ["M", posx, 0, "L", posx, Editor.CONFIG.CANVAS_HEIGHT].join(",");
					var p = Editor.STATE.CANVAS.path(path).attr(Editor.CONFIG.GRID_ATTR);
					arrGrid.push(p);
					p.insertBefore(background);
					posx += Editor.CONFIG.GRID_SIZE;
				}
				var posy = 0;
				while (posy <= Editor.CONFIG.CANVAS_HEIGHT) {
					var path = ["M", 0, posy, "L", Editor.CONFIG.CANVAS_WIDTH, posy].join(",");
					var p = Editor.STATE.CANVAS.path(path).attr(Editor.CONFIG.GRID_ATTR);
					p.insertBefore(background);
					arrGrid.push(p);
					posy += Editor.CONFIG.GRID_SIZE;
				}
			}
			background.mousedown(Editor.STATE.DRAGGERCANVAS.mousedown);
			Editor.STATE.BACKGROUND = background;
		},
		redraw: function () {
			while (arrGrid.length>0) {
				var p = arrGrid.pop();
				p.remove();
				delete p;
			}
			background0.attr({
				width: Editor.CONFIG.CANVAS_WIDTH,
				height: Editor.CONFIG.CANVAS_HEIGHT
			})  
			background.attr({
				width: Editor.CONFIG.CANVAS_WIDTH,
				height: Editor.CONFIG.CANVAS_HEIGHT
			})  
			if (Editor.CONFIG.GRID_DRAW) {
				var posx = 0;
				while (posx <= Editor.CONFIG.CANVAS_WIDTH) {
					var path = ["M", posx, 0, "L", posx, Editor.CONFIG.CANVAS_HEIGHT].join(",");
					var p = Editor.STATE.CANVAS.path(path).attr(Editor.CONFIG.GRID_ATTR);
					p.insertBefore(background);
					arrGrid.push(p);
					posx += Editor.CONFIG.GRID_SIZE;
				}
				var posy = 0;
				while (posy <= Editor.CONFIG.CANVAS_HEIGHT) {
					var path = ["M", 0, posy, "L", Editor.CONFIG.CANVAS_WIDTH, posy].join(",");
					var p = Editor.STATE.CANVAS.path(path).attr(Editor.CONFIG.GRID_ATTR);
					p.insertBefore(background);
					arrGrid.push(p);
					posy += Editor.CONFIG.GRID_SIZE;
				}
			}
		},
		mousedown: function (e) {
			var offsetY = $(window).scrollTop();
			var offsetX = $(window).scrollLeft();
			var pos = $("#canvas").position();
			if (!Editor.Util.isDragging()) {
				Editor.Util.unselectAll();
				Editor.STATE.DRAGGERCANVAS.setInitPoint(e.clientX + offsetX - pos.left, e.clientY + offsetY - pos.top);
				Editor.STATE.DRAGGER = Editor.STATE.DRAGGERCANVAS;
				backgroundTemp = background.clone();
				backgroundTemp.toFront();
			}
		},
		onmousemove: function (e) { 
			var offsetY = $(window).scrollTop();
			var offsetX = $(window).scrollLeft();
			var pos = $("#canvas").position();
			var nx = e.clientX + offsetX - pos.left;
			var ny = e.clientY + offsetY - pos.top;
			var dx = nx - x;
			var dy = ny - y;
			width = width + dx;
			height = height + dy;
			x = nx;
			y = ny;
			var sw = width;
			var sh = height;
			var tx = iniX - rect.getBBox().x;
			var ty = iniY - rect.getBBox().y;
			if (sw < 0) {
				sw = -1 * width;
				tx = (iniX - sw) - rect.getBBox().x;
			}
			if (sh < 0) {
				sh = -1 * height;
				ty = (iniY - sh) - rect.getBBox().y;
			} 
			rect.translate(tx, ty);
			rect.attr({
				width: sw,
				height: sh
			})  
			rect.insertBefore(Editor.STATE.BACKGROUND);
		},
		onmouseup: function () {
			var bbox = rect.getBBox();
			Editor.STATE.SHAPES.forEach(function (pair) {
				if (!pair.value.getIsDeleted()) {
					var shape = pair.value;
					if (Editor.Geometry.intersectShapes(bbox.x, bbox.y, bbox.width, bbox.height, shape.getX(), shape.getY(), shape.getWidth(), shape.getHeight())) {
						Editor.Util.select(shape);
					}
				}
			});

			rect.remove();
			delete rect;

			backgroundTemp.remove();
			delete backgroundTemp;

			isActive = false;
			Editor.STATE.DRAGGER = undefined;
		},
		setInitPoint: function (nx, ny) {
			iniX = nx;
			iniY = ny;
			x = nx;
			y = ny;
			width = 0;
			height = 0;
			rect = Editor.STATE.CANVAS.rect(iniX, iniY, width, height, 0).attr(Editor.CONFIG.DRAGGERCANVAS_RECT_ATTR);
			isActive = true;
		},
		getIsActive: function () {
			return isActive;
		}
	}
}
